import { Table, Button, Popconfirm, Row, Col, Input, Card } from 'antd';
import { SearchOutlined, PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';

const { Search } = Input;

// 模拟用户数据
const userData = [
  { id: 1, name: '张三', email: 'zhangsan@example.com', role: '管理员', status: '启用' },
  { id: 2, name: '李四', email: 'lisi@example.com', role: '操作员', status: '启用' },
  { id: 3, name: '王五', email: 'wangwu@example.com', role: '浏览者', status: '禁用' },
  { id: 4, name: '赵六', email: 'zhaoliu@example.com', role: '操作员', status: '启用' },
  { id: 5, name: '钱七', email: 'qianqi@example.com', role: '浏览者', status: '启用' },
];

const Users = () => {
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '用户名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '角色',
      dataIndex: 'role',
      key: 'role',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <>
          <Button type="link" icon={<EditOutlined />} size="small" />
          <Popconfirm title="确定要删除这个用户吗?" okText="确定" cancelText="取消">
            <Button type="link" danger icon={<DeleteOutlined />} size="small" />
          </Popconfirm>
        </>
      ),
    },
  ];

  return (
    <div>
      <Card title="用户管理" extra={<Button type="primary" icon={<PlusOutlined />}>添加用户</Button>}>
        <Row gutter={16} className="mb-4">
          <Col span={8}>
            <Search placeholder="搜索用户名" allowClear enterButton={<SearchOutlined />} size="large" />
          </Col>
        </Row>
        <Table columns={columns} dataSource={userData} rowKey="id" />
      </Card>
    </div>
  );
};

export default Users;